<template>
  <el-drawer
      ref="flowApproverDrawer"
      v-model="visible"
      direction="rtl"
      :before-close="handleClose"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
        <el-icon><EditPen/></el-icon>
        <EditName v-model:value="node.name"/>
      </span>
    </template>


    <div class="flow-setting-module">
      <!-- 办理人设置 -->
      <div v-if="node.type == 6" class="flow-setting-content">
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">办理人设置</p>
          <el-alert
              message="当流程中某个节点不需要审批，但需要对审批单进行业务办理时，可设置办理人节点，场景如财务打款、处理盖章等"
              type="info"/>
        </div>
      </div>

      <el-tabs>
        <el-tab-pane key="1" label="审批设置">
          <div class="flow-setting-content">
            <!-- 审批方式 -->
            <!-- <div v-if="node.type == 1" class="flow-setting-item">
              <p class="flow-setting-item-title">审批方式</p>
              <FlowSimpleSelect v-model="node.props.attr.approvalMode" :datas="approvalModes" placeholder="请选择审批方式" />
            </div> -->
            <!-- 审批人 -->
            <!-- <FlowNodeApproval :groups="node.props.approverGroups" :node="node" :title="node.type == 1 ? '审批人' : '办理人'" /> -->
            <div class="flow-setting-item">
              <!-- 审批人类型 -->
              <el-radio-group v-model="node.props.assignedType" class="w-fill" :size="size"
                              @change="changeApproverType(node.props)">
                <el-radio v-for="(approval, i) in approvals" :key="i"
                          :label="approval.value" :disabled="approval.disabled">
                  <span>{{ approval.name }}</span>
                </el-radio>
              </el-radio-group>
              <!-- 上级 -->
              <div v-if="node.props.assignedType === 'LEADER'">
                <p class="flow-setting-item-title">
                  <span>指定层级</span>
                </p>
                <el-radio-group :size="size" v-model="node.props.leader.level" class="w-fill">
                  <el-radio v-for="(higherLevel, i) in higherLevelModes" :key="i"
                            :label="higherLevel.value">
                    <span>{{ higherLevel.name }}</span>
                  </el-radio>
                </el-radio-group>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="higherLevels"/>
              </div>
              <!-- 部门负责人 -->
              <div v-if="node.props.assignedType === 2">
                <p class="flow-setting-item-title">
                  <span>指定层级</span>
                </p>
                <el-radio-group v-model="node.props.levelMode" :size="size" class="w-fill">
                  <el-radio v-for="(departmentHead, i) in departmentHeadModes" :key="i"
                            :label="departmentHead.value">
                    <span>{{ departmentHead.name }}</span>
                  </el-radio>
                </el-radio-group>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="departmentHeads"/>
              </div>
              <!-- 部门审批人 -->
              <div v-if="node.props.assignedType === 3">
                <p class="flow-setting-item-title">
                  <span>部门审批人</span>
                </p>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="departmentApprovals"/>
              </div>
              <!-- 编码审批人 -->
              <div v-if="node.props.assignedType === 4">
                <p class="flow-setting-item-title">
                  <span>编码对应部门审批人</span>
                </p>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="departmentApprovals"/>
              </div>
              <!-- 角色 -->
              <div v-if="node.props.assignedType === 'ROLE'">
                <p class="flow-setting-item-title">
                  <span>选择角色</span>
                </p>
                <FlowSelect v-model="node.props.role" :name="node.props.role"
                            @update:name="node.props.role = $event" :datas="roles"/>
              </div>
              <!-- 岗位 -->
              <div v-if="node.props.assignedType === 'POST'">
                <p class="flow-setting-item-title">
                  <span>选择岗位</span>
                </p>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="posts"/>
              </div>
              <!-- 用户组 -->
              <div v-if="node.props.assignedType === 7">
                <p class="flow-setting-item-title">
                  <span>选择用户组</span>
                </p>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="userGroups"/>
              </div>
              <!-- 指定成员 -->
              <div v-if="node.props.assignedType === 'ASSIGN_USER'">
                <p class="flow-setting-item-title">
                  <span>指定成员</span>
                  <span class="light-text">(不能超过 25 人)</span>
                  <UserSelector type="button" @copyData="copyData" :multiple="true" :user-list="node.props.assignedUser"/>
                  <!--            <el-button round icon="el-icon-plus"></el-button>-->
                  <!--            <UserSelector v-model="group.approverIds" mode="multiple" type="button" />-->
                </p>
              </div>
              <!-- 发起人自选 -->
              <div v-if="node.props.assignedType === 'SELF_SELECT'">
                <p class="flow-setting-item-title">
                  <span>选择方式</span>
                </p>
                <el-radio-group :size="size" class="w-fill" v-model="node.props.selfSelect.multiple">
                  <el-radio label="false">
                    <span>多选</span>
                  </el-radio>
                  <el-radio label="true">
                    <span>单选</span>
                  </el-radio>
                </el-radio-group>
<!--                <p class="flow-setting-item-title margin-top-10">-->
<!--                  <span>选择范围</span>-->
<!--                </p>-->
<!--                <el-radio-group :size="size" class="w-fill">-->
<!--                  <el-radio label="1">-->
<!--                    <span>全公司</span>-->
<!--                  </el-radio>-->
<!--                  <el-radio label="2">-->
<!--                    <span>指定成员</span>-->
<!--                  </el-radio>-->
<!--                  <el-radio label="3">-->
<!--                    <span>角色成员</span>-->
<!--                  </el-radio>-->
<!--                </el-radio-group>-->
<!--                <p class="flow-setting-item-title margin-top-10">-->
<!--                  <span>指定成员</span>-->
<!--                  <span class="light-text">(不能超过 25 人)</span>-->
<!--                  <UserSelector type="button"/>-->
<!--                </p>-->
              </div>
              <!-- 节点审批人 -->
              <div v-if="node.props.assignedType === 11">
                <p class="flow-setting-item-title">
                  <span>选择节点</span>
                </p>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="approveNodes"
                            valueName="id" labelName="name"/>
                <p class="flow-setting-item-title">
                  <span class="light-text">你可以选择前序节点名称，如果名称重复建议先修改审批节点的节点名称</span>
                </p>
              </div>
              <!-- 连续多级上级审批 -->
              <div v-if="node.props.assignedType === 12">
                <p class="flow-setting-item-title">
                  <span>审批终点</span>
                </p>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="higherLevels"/>
              </div>
              <!-- 表单内人员 -->
              <div v-if="node.props.assignedType === 13">
                <p class="flow-setting-item-title">
                  <span>人员控件</span>
                </p>
                <el-select :size="size" class="w-fill" default-value="1">
                  <el-option :value="higherLevel.value" v-for="(higherLevel, i) in higherLevels" :key="i"
                             :label="higherLevel.name">
                    {{ higherLevel.name }}
                  </el-option>
                </el-select>
                <p class="flow-setting-item-title margin-top-10">
                  <span>审批类型</span>
                </p>
                <el-radio-group :size="size" class="w-fill">
                  <el-radio lable="1">
                    <span>人员自己</span>
                  </el-radio>
                  <el-radio lable="2">
                    <span>人员上级</span>
                  </el-radio>
                  <el-radio lable="3">
                    <span>人员部门负责人</span>
                  </el-radio>
                </el-radio-group>
              </div>
              <!-- 表单内部门 -->
              <div v-if="node.props.assignedType === 14">
                <p class="flow-setting-item-title">
                  <span>部门控件</span>
                </p>
                <el-select :size="size" class="w-fill" default-value="1">
                  <el-option :value="higherLevel.value" v-for="(higherLevel, i) in higherLevels" :key="i">
                    {{ higherLevel.name }}
                  </el-option>
                </el-select>
                <p class="flow-setting-item-title margin-top-10">
                  <span>指定层级</span>
                </p>
                <el-radio-group v-model="node.props.levelMode" :size="size" class="w-fill">
                  <el-radio v-for="(departmentHead, i) in departmentHeadModes" :key="i"
                            :lable="departmentHead.value">
                    <span>{{ departmentHead.name }}</span>
                  </el-radio>
                </el-radio-group>
                <FlowSelect v-model="node.props.approverIds" :name="node.props.approverNames"
                            @update:name="node.props.approverNames = $event" :datas="departmentHeads"/>
              </div>
            </div>

            <!-- 审批方式 -->
            <div v-if="node.type == 1" class="flow-setting-item margin-top-10">
              <p class="flow-setting-item-title">
                <span>多人审批时审批方式</span>
              </p>
              <el-radio-group v-model="node.props.approvalMode" :size="size">
                <el-radio v-for="(sameApproval, i) in approvalModes" :key="i" :label="sameApproval.value"
                >
                  <span>{{ sameApproval.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>
            <!-- 审批人与发起人为同一人时 -->
            <div v-if="node.type == 1" class="flow-setting-item margin-top-10">
              <p class="flow-setting-item-title">
                <span>审批人与发起人为同一人时</span>
              </p>
              <el-radio-group v-model="node.props.sameMode" :size="size">
                <el-radio v-for="(sameApproval, i) in sameApprovals" :key="i" :label="sameApproval.value"
                >
                  <span>{{ sameApproval.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>
            <!-- 审批人为空时 -->
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">
                <span>{{ node.type == 1 ? '审批人' : '办理人' }}为空时</span>
              </p>
              <el-radio-group v-model="node.props.nobady.handler" :size="size">
                <el-radio v-for="(approvalWithNull, i) in approvalWithNulls" :key="i" :label="approvalWithNull.value"
                >
                  <span>{{ approvalWithNull.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>


            <div class="flow-setting-item">
              <p class="flow-setting-item-title">
                <span>如果审批被驳回</span>
              </p>
              <el-radio-group v-model="node.props.refuse.type" :size="size">
                <el-radio v-for="(refuse, i) in refuses" :key="i" :label="refuse.value"
                >
                  <span>{{ refuse.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane key="2" label="表单权限">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">表单权限</p>
              <AuthForm v-model:value="node.props.formPerms" readable/>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="3" label="高级设置">
          <FlowOperationButton v-model:value="node.props.configure"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <p>{{ node }}</p>
    <!-- <FlowDrawerFooter @close="onClose" @save="onSave" /> -->
  </el-drawer>
</template>
<script setup name="FlowApproverDrawer">
import FlowOperationButton from './FlowOperationButton.vue';
import EditName from '../../../common/EditName.vue';
import AuthForm from '../../../common/AuthForm.vue';
import UserSelector from '../../../common/OrgPicker.vue';

import {reactive, ref, createApp, defineEmits, defineProps, computed, onMounted, toRefs} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const emit = defineEmits(['close'])

const node = ref({})
const visible = ref(false)

const size = ref('default');


const approvalMethods = reactive([{
  name: '人工审批',
  value: 1,
},
  {
    name: '自动通过',
    value: 2,
  },
  {
    name: '自动拒绝',
    value: 3,
  },])

const approvalModes = reactive([
  {
    name: '多人会签(一人通过再到下一个人处理)',
    value: 'NEXT',
  },
  {
    name: '多人会签(所有人都通过才到下一个环节)',
    value: 'AND',
  },
  {
    name: '多人或签(一人通过或否决)',
    value: 'OR',
  },
])

const approvalWithNulls = reactive([
  {
    name: '自动通过',
    value: 'AUTO',
  },
  {
    name: '指定人员审批',
    value: 'TO_USER',
  },
  {
    name: '转交给审批管理员',
    value: 'TO_ADMIN',
  },
  {
    name: '自动拒绝',
    value: 'REFUSE',
  },
])

const sameApprovals = reactive([
  {
    name: '自动跳过',
    value: 'AUTO',
  },
  {
    name: '由发起人对自己审批',
    value: 'SELF',
  },

  // {
  //   name: '转交给直属上级审批',
  //   value: 3,
  // },
  // {
  //   name: '转交给部门负责人审批',
  //   value: 4,
  // },
])

const refuses = reactive([
  {
    name: '直接结束流程',
    value: 'TO_END'
  },
  {
    name: '指定节点',
    value: 'TO_NODE'
  },
  {
    name: '上一节点',
    value: 'TO_BEFORE'
  }
])

const approvals = reactive([
  {
    name: '发起人上级',
    code: 'higherLevel',
    value: 'LEADER',
    // 多个组时需要disabled
    disabled: false,
    // 是否可以多个组
    addable: true,
  },
  // {
  //   name: '部门负责人',
  //   value: 2,
  //   disabled: false,
  //   // 是否可以多个组
  //   addable: true,
  // },
  // {
  //   name: '部门审批人',
  //   value: 3,
  //   disabled: false,
  //   // 是否可以多个组
  //   addable: true,
  // },
  // {
  //   name: '编码审批人',
  //   value: 4,
  // },
  {
    name: '系统角色',
    value: 'ROLE',
    disabled: false,
    // 是否可以多个组
    addable: true,
  },
  {
    name: '系统岗位',
    value: 'POST',
    disabled: false,
    // 是否可以多个组
    addable: true,
  },
  // {
  //   name: '用户组',
  //   value: 7,
  //   disabled: false,
  //   // 是否可以多个组
  //   addable: true,
  // },
  {
    name: '指定成员',
    value: 'ASSIGN_USER',
    disabled: false,
    // 是否可以多个组
    addable: true,
  },
  {
    name: '发起人自选',
    value: 'SELF_SELECT',
    // 多个组时需要disabled
    disabled: false,
    // 是否可以多个组
    addable: true,
  },
  {
    name: '发起人自己',
    value: 'SELF',
    disabled: false,
    // 是否可以多个组
    addable: true,
  },
  // {
  //   name: '节点审批人',
  //   value: 11,
  //   disabled: true,
  //   // 是否可以多个组
  //   addable: true,
  // },
  // {
  //   name: '连续多级上级审批',
  //   value: 12,
  //   disabled: true,
  //   // 是否可以多个组
  //   addable: true,
  // },
  // {
  //   name: '表单内人员',
  //   value: 'FORM_USER',
  //   disabled: true,
  //   // 是否可以多个组
  //   addable: true,
  // },
  // {
  //   name: '表单内部门',
  //   value: 14,
  //   disabled: true,
  //   // 是否可以多个组
  //   addable: true,
  // },
])
// 上级方式
const higherLevelModes = reactive([
  {
    name: '自下而上（以发起人的直属上级为第一级）',
    value: 1,
    href: 'https://www.feishu.cn/hc/zh-CN/articles/360044810913',
    hrefName: '查看和设置上级信息',
  },
  {
    name: '自上而下（以公司的最高上级为第一级）',
    code: 'higherLevel',
    value: 2,
    href: 'https://www.feishu.cn/hc/zh-CN/articles/360044810913',
    hrefName: '查看和设置上级信息',
  },
])
// 上级层级
const higherLevels = reactive(
    [
      {
        name: '直属上级',
        value: '1',
      },
      {
        name: '第二级上级',
        value: '2',
      },
      {
        name: '第三级上级',
        value: '3',
      },
      {
        name: '第四级上级',
        value: '4',
      },
      {
        name: '第五级上级',
        value: '5',
      },
      {
        name: '第六级上级',
        value: '6',
      },
      {
        name: '第七级上级',
        value: '7',
      },
      {
        name: '第八级上级',
        value: '8',
      },
      {
        name: '第九级上级',
        value: '9',
      },
      {
        name: '第十级上级',
        value: '10',
      },
      {
        name: '第十一级上级',
        value: '11',
      },
      {
        name: '第十二级上级',
        value: '12',
      },
    ])
// 部门负责人方式
const departmentHeadModes = reactive(
    [
      {
        name: '自下而上（以发起人的直接部门负责人为第一级）',
        value: 1,
        href: 'https://www.feishu.cn/hc/zh-CN/articles/360044810913',
        hrefName: '如何配置部门负责人？',
      },
      {
        name: '自上而下（以公司的最高部门负责人为第一级）',
        code: 'higherLevel',
        value: 2,
        href: 'https://www.feishu.cn/hc/zh-CN/articles/360044810913',
        hrefName: '查看和设置上级信息',
      },
    ])
// 部门负责人层级
const departmentHeads = reactive(
    [
      {
        name: '直属部门负责人',
        value: '1',
      },
      {
        name: '第二级部门负责人',
        value: '2',
      },
      {
        name: '第三级部门负责人',
        value: '3',
      },
      {
        name: '第四级部门负责人',
        value: '4',
      },
      {
        name: '第五级部门负责人',
        value: '5',
      },
      {
        name: '第六级部门负责人',
        value: '6',
      },
      {
        name: '第七级部门负责人',
        value: '7',
      },
      {
        name: '第八级部门负责人',
        value: '8',
      },
      {
        name: '第九级部门负责人',
        value: '9',
      },
      {
        name: '第十级部门负责人',
        value: '10',
      },
      {
        name: '第十一级部门负责人',
        value: '11',
      },
      {
        name: '第十二级部门负责人',
        value: '12',
      },
    ])
// 部门审批人
const departmentApprovals = reactive(
    [
      {
        name: '部长',
        value: '101',
      },
      {
        name: '体系负责人',
        value: '102',
      },
      {
        name: 'HRBP',
        value: '103',
      },
      {
        name: '部门助理',
        value: '104',
      },
      {
        name: '资产助理',
        value: '105',
      },
      {
        name: '办公账号员',
        value: '106',
      },
      {
        name: '门禁员',
        value: '107',
      },
      {
        name: '转岗须知员',
        value: '108',
      },
      {
        name: '编码责任人',
        value: '109',
      },
      {
        name: '项目负责人',
        value: '110',
      },
    ])
// 角色
const roles = reactive(
    [
      {
        name: '人事',
        value: '1',
      },
      {
        name: '行政',
        value: '2',
      },
      {
        name: '招聘',
        value: '3',
      },
      {
        name: '财务',
        value: '4',
      },
      {
        name: '法务',
        value: '5',
      },
      {
        name: '经理',
        value: '6',
      },
    ])
// 岗位
const posts = reactive(
    [
      {
        name: '技术顾问',
        value: '1',
      },
      {
        name: 'HRBP',
        value: '2',
      },
      {
        name: '部门助理',
        value: '3',
      },
      {
        name: '行政专员',
        value: '4',
      },
      {
        name: '商务专员',
        value: '5',
      },
      {
        name: '现场助理',
        value: '6',
      },
      {
        name: '项目经理',
        value: '7',
      },
      {
        name: '薪酬专员',
        value: '8',
      },
      {
        name: '招聘专员',
        value: '9',
      },
      {
        name: '考勤专员',
        value: '10',
      },
      {
        name: '副总经理',
        value: '11',
      },
    ])
// 用户组
const userGroups = reactive(
    [
      {
        name: '采购组',
        value: '1',
      },
      {
        name: '报销组',
        value: '2',
      },
      {
        name: '资产组',
        value: '3',
      },
    ])

const afterVisibleChange = (val) => {
  console.log('visible', val);
}

const showDrawer = (data) => {
  node.value = data;
  visible.value = true;
  console.log("成功还是失败", visible)

}

defineExpose({
  showDrawer
});

const onClose = () => {
  console.log("不关闭?")
  visible.value = false;
  emit('close');
}

const handleClose = () => {
  // 更新节点显示信息
  let content = '';
  node.value.props.assignedUser.forEach((item)=>{
    if (item.name && content){
      content += ","
    }
    content += item.name
    console.log("-----------",content)

  })

  console.log("-----content---->", content)
  if (content) {
    store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: content});
    store.dispatch('process/updateNode', {currNode: node.value, field: 'error', value: false});
  } else {
    store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: null});
    store.dispatch('process/updateNode', {currNode: node.value, field: 'error', value: true});
  }
  onClose();
}

const showMode = () => {
  switch (node.value.props.assignedType) {
    case "ASSIGN_USER":
      return node.value.props.length > 0;
    case "SELF_SELECT":
      return this.nodeProps.selfSelect.multiple;
    case "LEADER_TOP":
      return this.nodeProps.formUser !== '';
    case "FORM_USER":
      return true;
    case "ROLE":
      return true;
    default:
      return false;
  }
}



const changeApproverType = (group) => {
  group.approverIds = [];
  group.approverNames = [];
}
// 添加审批人
const addApproval = () => {
  this.groups.push({
    id: this.uuid(),
    // 审批人模式
    approverType: 1,
    // 层级模式
    levelMode: 1,
    // 审批人ID
    approverIds: [],
    // 审批人名称
    approverNames: [],
  });
}
// 删除审批人
const delApproval = (group) => {
  this.groups.forEach((element, i) => {
    if (element.id == group.id) {
      this.groups.splice(i, 1);
    }
  });
}

const copyData = (data) => {
  console.log("<---------------------是这个意思吗-------------------->",JSON.stringify(data.value))
  node.value.props.assignedUser = data.value;
}
</script>
